<template>
  <section>
		<div class="model retrieval">
      <img :src="IMGBASE64.JIANSUOGUANLI2X" class="orange">
			<span class="title">检索管理</span>
			<div class="body">
				<span>所属区域:</span>
				<select class="select" v-model="regionSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}" @change="getSite">
          <option v-for="(item, key) in regionOption" :label="item" :value="item"></option>
        </select>
				<span>上下车站点:</span>
				<select class="selectLong" v-model="siteSelect" :style="{background: `url(${IMGBASE64.SELECT}) no-repeat scroll right center`}">
          <option v-for="(item, key) in siteOption" :label="item" :value="item"></option>
        </select>
				<el-button type="primary" @click="getTableData" size="small">搜索</el-button>
        <el-button type="primary" @click="clearSelect" size="small">重置</el-button>
				<div class="right">
					<a :href="this._httpUrl + `schoolbus/manage/site/query/export?yxt-xtoken=${exportUrl}`">
            <el-button type="primary" size="small">导出</el-button>
          </a> 
					<el-button type="success" @click="upshow()" size="small">新增</el-button>
				</div>
			</div>
		</div>

		<div class="model site">
      <img :src="IMGBASE64.XIAOCHEZHANDIAN2X" class="pink">
			<span class="title">校车站点</span>
			<div class="kong"></div>
			<template>
				<el-table :data="tableData" style="100%">
					<el-table-column prop="num" label="#" align="center"></el-table-column>
					<el-table-column prop="id" label="站点ID" align="center"></el-table-column>
					<el-table-column prop="area" label="所属区域" align="center"></el-table-column>
					<el-table-column prop="siteName" label="上下车站点" align="center" :show-overflow-tooltip='true'></el-table-column>
					<el-table-column prop="unitPrice" label="单程价" align="center"></el-table-column>
					<el-table-column prop="lineId" label="线路ID" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template scope="scope">
							<el-button size="small" @click="deleteData(scope)">删除</el-button>
							<el-button size="small" @click="modifySite(scope)">修改</el-button>
						</template>
					</el-table-column>
				</el-table>
        <el-pagination
          v-show="paging"
          @current-change="handleCurrentChange"
          :page-size="20"
          layout="prev, pager, next, jumper"
          :total="total"
          class="pull-right">
        </el-pagination>
			</template>
		</div>

		<div class="up" v-show="upShow">
			<img :src="IMGBASE64.GREENXINZENG2X" class="green">
			<span class="title">新增站点</span>
      <el-button icon="el-icon-close" class="close" @click="upshow()"></el-button>
			<div class="kong"></div>
			<div class="form">
				<el-form ref="form" :model="form" label-width="110px">
					<el-form-item label="所属区域">
						<el-input v-model="form.region" size="small"></el-input>
					</el-form-item>
					<el-form-item label="上下车站点">
						<el-input v-model="form.site" size="small"></el-input>
					</el-form-item>
					<el-form-item label="单程价">
						<el-input v-model="form.price" size="small"></el-input>
					</el-form-item>
					<el-form-item label="线路ID">
						<el-input v-model="form.lineId" size="small"></el-input>
					</el-form-item>
				</el-form>
			</div>
      <el-col :span="24">
			<div class="bottom">
				<div class="left">
					<el-checkbox v-model="checked">继续添加</el-checkbox>
				</div>
				<div class="right">
					<el-button type="success" @click="addData" size="small">确定</el-button>
          <el-button @click="upshow()" size="small">取消</el-button>
				</div>
			</div>
      </el-col>
		</div>

        <div class="up" v-show="isModify">
          <img :src="IMGBASE64.XIANGQING2X" class="green">
          <span class="title">修改站点</span>
          <el-button icon="el-icon-close" class="close" @click="modifyShow()"></el-button>
          <div class="kong"></div>
          <div class="form">
            <el-form ref="form" :model="modifyForm" label-width="110px">
              <el-form-item label="所属区域">
                <el-input v-model="modifyForm.region" size="small"></el-input>
              </el-form-item>
              <el-form-item label="上下车站点">
                <el-input v-model="modifyForm.site" size="small"></el-input>
              </el-form-item>
              <el-form-item label="单程价">
                <el-input v-model="modifyForm.price" size="small"></el-input>
              </el-form-item>
              <el-form-item label="线路ID">
                <el-input v-model="modifyForm.lineId" size="small"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="bottom">
            <div class="center">
              <el-button type="success" @click="confirmModify" size="small">确定</el-button>
              <el-button @click="modifyShow()" size="small">取消</el-button>
            </div>
          </div>
        </div>

		<transition name="modal-shadow">
      <div class="modal-backdrop" v-show="isSuccess"></div>
    </transition>
  </section>
</template>

<script>
export default {
  data () {
    return {
      exportUrl: null,
      checked: false,
      isSuccess: false,
      isModify: false,
      upShow: false,
      regionSelect: null,
      regionOption: [],
      siteSelect: null,
      siteOption: [],
      tableData: [],
      total: 0,
      page: 1,
      paging: true,
      tablemsg: [],
      allSite: [],
      form: {
        region: null,
        site: null,
        price: null,
        lineId: null
      },
      modifyForm: {
        region: null,
        site: null,
        price: null,
        lineId: null,
        id: null
      }
    }
  },
  mounted () {
    this.getOptionData()
    this.getTableData()
    this.exportUrl = this._exportUrl()
  },
  methods: {
    upshow () {
      this.upShow = !this.upShow
      this.isSuccess = !this.isSuccess
    },
    modifyShow () {
      this.isModify = !this.isModify
      this.isSuccess = !this.isSuccess
    },
    handleCurrentChange (val) {
      this.page = val
      this.getTableData()
    },
    getOptionData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/site/areaAndSite', {}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.allSite = response.data.data
          this.regionOption.push(this.allSite[0].area)
          for (var i = 0; i < this.allSite.length; i++) {
            this.siteOption[i] = this.allSite[i].siteName
            var flag = true
            for (var j = 0; j < this.regionOption.length; j++) {
              if (this.allSite[i].area === this.regionOption[j]) {
                flag = false
                break
              }
            }
            if (flag) {
              this.regionOption.push(this.allSite[i].area)
            }
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getTableData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/site/query', {area: this.regionSelect, siteName: this.siteSelect, page: (this.page), rows: 20}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.tableData = response.data.data.rows
          this.total = response.data.data.total
          console.log(this.tableData)
          for (var i = 0; i < this.tableData.length; i++) {
            this.tableData[i].num = i + 1
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    addData () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/site/add', {area: this.form.region, siteName: this.form.site, unitPrice: this.form.price, lineId: this.form.lineId}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
          if (this.checked === true) {
            this.checked = false
            this.form.region = null
            this.form.price = null
            this.form.lineId = null
            this.form.site = null
          } else {
            this.upShow = !this.upShow
            this.isSuccess = !this.isSuccess
            this.form.region = null
            this.form.price = null
            this.form.lineId = null
            this.form.site = null
          }
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    deleteData (scope) {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.get(this._httpUrl + 'schoolbus/manage/site/del?id=' + scope.row.id, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    modifySite (scope) {
      this.isModify = !this.isModify
      this.isSuccess = !this.isSuccess
      this.modifyForm.region = scope.row.area
      this.modifyForm.site = scope.row.siteName
      this.modifyForm.price = scope.row.unitPrice
      this.modifyForm.lineId = scope.row.lineId
      this.modifyForm.id = scope.row.id
    },
    confirmModify () {
      // let _cookie = document.cookie.split(';')
      // let _cookieArray = []
      // _cookie.forEach(v => {
      //   let _d = v.split('=')
      //   _cookieArray.push({
      //     key: _d[0],
      //     value: _d[1]
      //   })
      // })
      this.$http.post(this._httpUrl + 'schoolbus/manage/site/update', {area: this.modifyForm.region, siteName: this.modifyForm.site, unitPrice: this.modifyForm.price, lineId: this.modifyForm.lineId, id: this.modifyForm.id}, {'headers': {'yxt-xtoken': localStorage.xtoken}}).then(function (response) {
        if (response.body.code === '000') {
          this.getTableData()
          this.isModify = !this.isModify
          this.isSuccess = !this.isSuccess
        } else if (response.body.code === '887') {
          this.$router.push('/')
        } else if (response.body.code === '889') {
          this.$router.push('/')
        }
      })
    },
    getSite () {
      this.siteOption = []
      for (var i = 0; i < this.allSite.length; i++) {
        if (this.regionSelect === this.allSite[i].area) {
          this.siteOption.push(this.allSite[i].siteName)
        }
      }
    },
    clearSelect () {
      this.regionSelect = null
      this.siteSelect = null
      this.getOptionData()
    }
  }
}
</script>

<style lang="less" scoped>
@import '/static/css/all-use.css';
  .el-form-item{
    margin-bottom: 30px;
  }
  .retrieval{
    .body{
      span{
      	margin-left: 4%;
      }
      span:first-child{
      	margin-left: 0;
      }
      .select{
        width: 10%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
      }
      .selectLong{
        width: 25%;
        border: 0;
        border-bottom: 1px solid #D7D7D7;
        margin-right: 2%;
      }
      .right{
        float: right;
        margin-right: 10px;
				&-text{
					width: 58%;
					border: 0;
					border-bottom: 1px solid #D7D7D7;
				}
				.search{
					background: #00A0E8;
					border: 0;
					border-radius: 2px;
					color: #fff;
					padding: 5px 15px;
				}
      }
    }
  }

  .up{
  	width: 35%;
    position: fixed;
    top: 50px;
    left: 50%;
    margin-left: -16%;
    background: #FFF;
    border-radius: 5px;
    padding: 20px 20px 0 20px;
    z-index: 99999;
  	.green{
		  position: absolute;
		  left: 24px;
		  top: -25px;
		}
		.title{
      margin-left: 96px;
    }
    .form{
    	width: 80%;
    }
    .bottom{
			padding: 10px 30px;
			border-top: 1px solid #D7D7D7;
			background: #F8F8F8;
      margin-left: -20px;
      margin-right: -20px;
      border-radius: 0 0 5px 5px;
			.left{
        width: 50%;
        display: inline-block;
        margin-left: 2%;
      }
      .right{
        width: 43%;
        display: inline-block;
        text-align: right;
      }
      .center{
        text-align: center;
      }
    }
  }

</style>
